import React, { Component } from 'react'
import { Text, View, TouchableOpacity, Share } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack';
import Ionicons from 'react-native-vector-icons/Ionicons'

import NewsScreen from '../screens/News'
import NewsDetailScreen from '../screens/News/Detail'


const Stack = createStackNavigator();

export default class HomeStack extends Component {
  shareNews = async () => {
    try {
      const result = await Share.share({
        message:
          'React Native | 分享描述',
      });

      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      alert(error.message);
    }
  };

  render() {
    return (
      <Stack.Navigator>
        <Stack.Screen
          name="News"
          component={NewsScreen}  
          options={{
            title: '今日新闻',
            headerStyle: {
              backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
              fontSize: 18
            }
          }}
        />
        <Stack.Screen
          name="NewsDetail" 
          component={NewsDetailScreen} 
          options={{ 
            title: '新闻详情1',
            headerRight: () => {
              return (
              <TouchableOpacity onPress={() => this.shareNews()} style={{marginRight: 20}}>
                <Ionicons name={'share-social-outline'} size={25} />
              </TouchableOpacity>
              )
            }
          }} 
        />
      </Stack.Navigator>
    )
  }
}
